<template>
    <div>
        <div class="logo">
            <img :src="logo" />
        </div>
        <div>
            <van-form @submit="onSubmit">
                <van-field v-model="username" name="username" label="用户名" placeholder="用户名" :rules="[{ pattern:m_pattern, message: '请填写正确的用户名' }]" />
                <van-field
                    v-model="password"
                    type="password"
                    name="password"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ pattern: p_pattern, message: '密码长度只少6个' }]"
                />
                <div style="margin: 16px;">
                    <van-button square block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import logo from "@/assets/logo.png";
import Vue from "vue";
import { Form, Field, Button, Toast } from "vant";
Vue.use(Form);
Vue.use(Field);
Vue.use(Button);
Vue.use(Toast);
export default {
    data() {
        return {
            username: "",
            password: "",
            m_pattern: /[\s\S]{4,}/,
            p_pattern: /[\s\S]{6,}/,
            logo
        };
    },
    methods: {
        onSubmit(values) {
            // console.log("submit", values);
            // 请求登录
            this.$http.post("http://39.105.167.80:3000/public/login",values).then(res => {
                if(res.code === 0){
                    // 登录成功
                    Toast.success({message: res.msg,onClose:() => {
                        // 获取是否有goto参数
                        const goto = this.$route.query.goto
                        if(goto){
                            this.$router.push(goto)
                        }else{
                            // 跳转到个人中心页面
                            this.$router.push("/center")
                        }
                        
                    }})
                }else{
                    Toast.fail(res.msg)
                }
            })
        },
    },
    created(){
        // 隐藏底部菜单
        this.$store.commit("global/setIsShow",false);
    },
    beforeDestroy(){
        // 显示底部菜单
        this.$store.commit("global/setIsShow",true);
    }
};
</script>

<style scoped>
.logo {
    margin-top: 150px;
    margin-bottom: 100px;
    text-align: center;
}
</style>

</style>
